﻿@{
    Layout = "~/Views/Shared/_Layout_RTU_block.cshtml";
    ViewBag.Title = "Map";
}

<div class="xds-no-breadcrumb">
    <div class="full-height">
        <div class="full-height-scroll white-bg border-left" id="pipecontainerparent">
            <div class="mapcontainer" id="mapcontainer">
                <canvas id="myCanvas" style="position:absolute; z-index:4"></canvas>
                @*<div class="mark-container" onclick="showxdspopocer()" style="left:10%; top:50%; text-align:center; height:30px; width:30px; margin-left:-15px; margin-top:-15px; z-index:5; position:absolute; background-image:url(/Images/tank.png); background-size:100% 100%; background-repeat:no-repeat;"></div>
                    <div class="mark-container" style="left:10%; top:50%; z-index:6; height:2px; width:2px; margin-left:-1px; margin-top:-1px; border:2px solid blue; border-radius:2px; position:absolute;"></div>
                    <div id="xdstesttest" style="left:15%; top:55%; position:absolute;">
                        <div class="mark-container" style="text-align:center; height:20px; width:80px; z-index:5; background-color:yellow; margin-top:-20px; border:1px solid black; position:absolute;"><font color="black">270F</font></div>
                        <div class="mark-container" style="text-align:center; height:20px; width:80px; z-index:5; background-color:yellow; margin-top:-1px; border:1px solid black; position:absolute;"><font color="black">wer</font></div>
                    </div>*@
                <div class="tuliouter" style="position: absolute; left: 10px; top:10px;width: 80px; height: 80px; z-index:10;">
                    <div class="tuli" id="focusnorth" style="width: 80px; height: 80px; background-image:url(../../Images/north.png); background-size:100% 100%; border-radius: 10px; ">

                    </div>
                </div>
                <div class="tuliouter" style="position: absolute; bottom: 10px; right:20px;width: 140px; height: 130px; z-index:10;">
                    @*<div class="mark-container popover-show" style="width: 30px; height: 30px; float: right; background-color: blue" data-toggle="popover" title="图例" data-html="true" data-content="sssss">
                        </div>*@
                    <div class="tuli" style="width: 140px; height: 130px; background-color:#eeeeee; border-radius: 4px; ">
                        @*<div style="width:80px;height:25px;text-align:center;font-size:16px">图例</div>*@
                        <div style="width:140px;height:25px;text-align:center;font-size:16px">legend</div>
                        <div style="width:140px;height:25px;margin-left:10px">
                            <div style="width: 15px; height: 15px; margin-left: 5px; margin-top: 5px; background-color: #ffffff; float: left; border-radius: 7px; "></div>
                            @*<b style="float:left;margin-left:5px;margin-top:3px">正常</b>*@
                            <b style="float:left;margin-left:5px;margin-top:3px">Active</b>
                        </div>
                        <div style="width:140px;height:25px;margin-left:10px">
                            <div style="width: 15px; height: 15px; margin-left: 5px; margin-top: 5px; background-color: #ffff00; float: left; border-radius: 7px; "></div>
                            @*<b style="float:left;margin-left:5px;margin-top:3px">掉线</b>*@
                            <b style="float:left;margin-left:5px;margin-top:3px">Disconnected</b>
                        </div>
                        <div style="width:140px;height:25px;margin-left:10px">
                            <div style="width: 15px; height: 15px; margin-left: 5px; margin-top: 5px; background-color: #808080; float: left; border-radius: 7px; "></div>
                            @*<b style="float:left;margin-left:5px;margin-top:3px">无数据</b>*@
                            <b style="float:left;margin-left:5px;margin-top:3px">No Data</b>
                        </div>
                        <div style="width:140px;height:25px;margin-left:10px">
                            <div style="width: 15px; height: 15px; margin-left: 5px; margin-top: 5px; background-color: #ff0000; float: left; border-radius: 7px; "></div>
                            @*<b style="float:left;margin-left:5px;margin-top:3px">停用</b>*@
                            <b style="float:left;margin-left:5px;margin-top:3px">Stopped</b>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="xds-check-box fadeInRight animated">
    <div class="heading" draggable="true">
        选择要显示的内容
    </div>
    <div class="col-sm-12">
        <div class="checkbox i-checks"><label> <input type="checkbox" value="" disabled="" checked=""> <i></i> 油井</label></div>
        <div class="checkbox i-checks"><label> <input type="checkbox" id="temperaturesensor" value=""> <i></i> 温度传感器</label></div>
        <div class="checkbox i-checks"><label> <input type="checkbox" id="oilpipe" value=""> <i></i> 输油管道</label></div>
    </div>
</div>
<div id="xds-check">
    <a class="open-xds-check">
        <i class="fa fa-check-circle"></i>
    </a>
</div>
@section Styles {
    @Styles.Render("~/Content/plugins/iCheck/iCheckStyles")
    @Styles.Render("~/plugins/sweetAlertStyles")
    <style type="text/css">
        .popover-content {
            min-width: 385px;
        }

        .popover {
            min-width: 385px;
        }

        .tuli {
            opacity: 0;
        }

        .tuliouter:hover .tuli {
            opacity: 1;
        }

        #mapcontainer {
            position: relative;
        }

        .temperaturetab {
        }
    </style>
}
@section Scripts {
    @Scripts.Render("~/plugins/iCheck")
    @Scripts.Render("~/bundles/echarts")
    @Scripts.Render("~/plugins/sweetAlert")
    <script type="text/javascript">
        var showpoverid = 0;
        var xdspoverid = 0;
        var svgpath = "";
        var colorplan;
        var allwellline = "";
        var alltempline = "";
        var temmptrueorfalse = 0;//判断需不需要重画温度传感器的线
        $(document).ready(function () {
            $("#myCanvas").attr("width", $("#mapcontainer").width());
            $("#myCanvas").attr("height", $("#mapcontainer").height());
            $.ajax({
                url: "/Map/ColorPlan",
                method: 'GET',
                dataType: 'json',
                data: { blockid: sessionStorage.blockid },
                async: false,
                success: function (data) {
                    colorplan = data;
                }
            });
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
            $.ajax({
                url: "/WellList/WellOfBlock",
                method: 'GET',
                dataType: 'json',
                data: { blockid: sessionStorage.blockid },
                async: false,
                success: function (data) {
                    if (data.status == 7) {
                        swal({
                            title: "Welcome in Alerts!",
                            text: "Authority error."
                        });
                    }
                    else if (data.status == 0) {
                        $("#mapcontainer").css("background-image", "url(http://104.219.42.52:8888" + data.oneblock.MapPath + ")");
                        $("#focusnorth").css("transform", "rotate(" + data.oneblock.Angle + "deg)");
                        $.each(data.data, function (i, item) {//油井
                            if (item.TabWidth >= item.Width) {//判断油井框在油井左右位置
                                if (item.Status.indexOf("Stopped") >= 0) {//判断油井不同状态
                                    $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">Well No.' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">Intelli-Cloud</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; height:18px; position:absolute;"><div class="mark-container welltabupright" style="background-color:' + colorplan.data.WellStop + '; border:1px solid ' + colorplan.data.TabStopBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownright" style="background-color:' + colorplan.data.WellStop + '; border:1px solid ' + colorplan.data.TabStopBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                                } else if (item.Status.indexOf("Active") >= 0) {
                                    $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">Well No.' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">Intelli-Cloud</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; height:18px; position:absolute;"><div class="mark-container welltabupright" style="background-color:' + colorplan.data.WellNormal + '; border:1px solid ' + colorplan.data.TabNormalBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownright" style="background-color:' + colorplan.data.WellNormal + '; border:1px solid ' + colorplan.data.TabNormalBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                                } else if (item.Status.indexOf("Disconnected") >= 0) {
                                    $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">Well No.' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">Intelli-Cloud</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; height:18px; position:absolute;"><div class="mark-container welltabupright" style="background-color:' + colorplan.data.WellOutLine + '; border:1px solid ' + colorplan.data.TabOutLineBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownright" style="background-color:' + colorplan.data.WellOutLine + '; border:1px solid ' + colorplan.data.TabOutLineBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                                } else {
                                    $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">Well No.' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">Intelli-Cloud</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; height:18px; position:absolute;"><div class="mark-container welltabupright" style="background-color:' + colorplan.data.WellNoRe + '; border:1px solid ' + colorplan.data.TabNoReBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownright" style="background-color:' + colorplan.data.WellNoRe + '; border:1px solid ' + colorplan.data.TabNoReBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                                }
                            } else {
                                if (item.Status.indexOf("Stopped") >= 0) {//判断油井不同状态
                                    $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">Well No.' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">Intelli-Cloud</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; margin-left:-100px; height:18px; position:absolute;"><div class="mark-container welltabupleft" style="background-color:' + colorplan.data.WellStop + '; border:1px solid ' + colorplan.data.TabStopBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownleft" style="background-color:' + colorplan.data.WellStop + '; border:1px solid ' + colorplan.data.TabStopBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                                } else if (item.Status.indexOf("Active") >= 0) {
                                    $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">Well No.' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">Intelli-Cloud</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; margin-left:-100px; height:18px; position:absolute;"><div class="mark-container welltabupleft" style="background-color:' + colorplan.data.WellNormal + '; border:1px solid ' + colorplan.data.TabNormalBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownleft" style="background-color:' + colorplan.data.WellNormal + '; border:1px solid ' + colorplan.data.TabNormalBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                                } else if (item.Status.indexOf("Disconnected") >= 0) {
                                    $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">Well No.' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">Intelli-Cloud</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; margin-left:-100px; height:18px; position:absolute;"><div class="mark-container welltabupleft" style="background-color:' + colorplan.data.WellOutLine + '; border:1px solid ' + colorplan.data.TabOutLineBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownleft" style="background-color:' + colorplan.data.WellOutLine + '; border:1px solid ' + colorplan.data.TabOutLineBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                                } else {
                                    $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">Well No.' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">Intelli-Cloud</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; margin-left:-100px; height:18px; position:absolute;"><div class="mark-container welltabupleft" style="background-color:' + colorplan.data.WellNoRe + '; border:1px solid ' + colorplan.data.TabNoReBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownleft" style="background-color:' + colorplan.data.WellNoRe + '; border:1px solid ' + colorplan.data.TabNoReBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                                }
                            }
                            //if (item.TabWidth >= item.Width) {//判断油井框在油井左右位置
                            //    if (item.Status.indexOf("Stopped") >= 0) {//判断油井不同状态
                            //        $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">井号：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; height:18px; position:absolute;"><div class="mark-container welltabupright" style="background-color:' + colorplan.data.WellStop + '; border:1px solid ' + colorplan.data.TabStopBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownright" style="background-color:' + colorplan.data.WellStop + '; border:1px solid ' + colorplan.data.TabStopBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                            //    } else if (item.Status.indexOf("Active") >= 0) {
                            //        $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">井号：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; height:18px; position:absolute;"><div class="mark-container welltabupright" style="background-color:' + colorplan.data.WellNormal + '; border:1px solid ' + colorplan.data.TabNormalBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownright" style="background-color:' + colorplan.data.WellNormal + '; border:1px solid ' + colorplan.data.TabNormalBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                            //    } else if (item.Status.indexOf("Disconnected") >= 0) {
                            //        $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">井号：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; height:18px; position:absolute;"><div class="mark-container welltabupright" style="background-color:' + colorplan.data.WellOutLine + '; border:1px solid ' + colorplan.data.TabOutLineBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownright" style="background-color:' + colorplan.data.WellOutLine + '; border:1px solid ' + colorplan.data.TabOutLineBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                            //    } else {
                            //        $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">井号：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; height:18px; position:absolute;"><div class="mark-container welltabupright" style="background-color:' + colorplan.data.WellNoRe + '; border:1px solid ' + colorplan.data.TabNoReBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownright" style="background-color:' + colorplan.data.WellNoRe + '; border:1px solid ' + colorplan.data.TabNoReBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                            //    }
                            //} else {
                            //    if (item.Status.indexOf("Stopped") >= 0) {//判断油井不同状态
                            //        $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">井号：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; margin-left:-100px; height:18px; position:absolute;"><div class="mark-container welltabupleft" style="background-color:' + colorplan.data.WellStop + '; border:1px solid ' + colorplan.data.TabStopBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownleft" style="background-color:' + colorplan.data.WellStop + '; border:1px solid ' + colorplan.data.TabStopBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                            //    } else if (item.Status.indexOf("Active") >= 0) {
                            //        $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">井号：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; margin-left:-100px; height:18px; position:absolute;"><div class="mark-container welltabupleft" style="background-color:' + colorplan.data.WellNormal + '; border:1px solid ' + colorplan.data.TabNormalBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownleft" style="background-color:' + colorplan.data.WellNormal + '; border:1px solid ' + colorplan.data.TabNormalBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                            //    } else if (item.Status.indexOf("Disconnected") >= 0) {
                            //        $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">井号：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; margin-left:-100px; height:18px; position:absolute;"><div class="mark-container welltabupleft" style="background-color:' + colorplan.data.WellOutLine + '; border:1px solid ' + colorplan.data.TabOutLineBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownleft" style="background-color:' + colorplan.data.WellOutLine + '; border:1px solid ' + colorplan.data.TabOutLineBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                            //    } else {
                            //        $("#mapcontainer").append('<div class ="mark-container xdswell" id="well_' + item.ID + '" onclick="popovertoggle(\'well' + item.ID + '\')" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + item.Angle + 'deg);"></div><div id="well-' + item.ID + '" class="popover-show" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ')">井号：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:260px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\' style=\'height:60px\'></div>" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:100px; margin-left:-100px; height:18px; position:absolute;"><div class="mark-container welltabupleft" style="background-color:' + colorplan.data.WellNoRe + '; border:1px solid ' + colorplan.data.TabNoReBorder + ';"><font color="black">' + item.Name1 + '</font></div><div class="mark-container welltabdownleft" style="background-color:' + colorplan.data.WellNoRe + '; border:1px solid ' + colorplan.data.TabNoReBorder + ';"><font color="black">' + item.Name2 + '</font></div></div>')
                            //    }
                            //}
                            DrawLine(item.Width, item.Height, item.TabWidth, item.TabHeight)
                            allwellline = allwellline + item.Width + '_' + item.Height + '_' + item.TabWidth + '_' + item.TabHeight + "$";
                            //$("#mapcontainer").append('<div class="mark-container popover-show" id="' + item.ID + '" data-toggle="popover" title=\'<a onclick="test(' + item.ID + ',' + item.Name1 + ')">井名：' + item.Name1 + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" onclick="test(' + item.ID + ',' + item.Name + ')">云监控</a>\' data-html="true" data-content="<div id=\'' + item.ID + '-img\' style=\'min-width: 400px; height:200px; margin:0 auto\'></div><div id=\'' + item.ID + '-img2\'></div>" style="left:' + item.Width + ';top:' + item.Height + '"><div class="pin bg' + item.Status + '" id="' + item.ID + '"><span class="num">' + item.ID + '</span></div><div class="pulse ' + item.Status + '"></div></div>')
                        });
                        $.each(data.data1, function (i, item) {//温度
                            if (item.TabWidth >= item.Width) {//判断框在左右位置
                                $("#mapcontainer").append('<div class="mark-container temperature-sensor" style="display:none; left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; text-align:center;line-height: 12px; height:20px; width:20px; background-color:' + colorplan.data.TempBg + '; border:3px solid ' + colorplan.data.TempBorder + '; border-radius:10px; margin-left:-10px; margin-top:-10px; z-index:5; position:absolute;"><font color="white">' + colorplan.data.TempChar + '</font></div><div id="temp' + item.Id + '" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:80px; height:18px; position:absolute;"><div class="mark-container temperature-sensor" style="display:none; text-align:center; height:18px; width:80px; z-index:5; background-color:' + colorplan.data.TempNormal + '; margin-top:-18px; border:1px solid black; position:absolute;"><font color="black">270F</font></div><div class="mark-container temperature-sensor" style="display:none; text-align:center; height:18px; width:80px; z-index:5; background-color:' + colorplan.data.TempNormal + '; margin-top:-1px; border:1px solid black; position:absolute;"><font color="black">' + item.Name + '</font></div></div>')
                            } else {
                                $("#mapcontainer").append('<div class="mark-container temperature-sensor" style="display:none; left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; text-align:center;line-height: 12px; height:20px; width:20px; background-color:' + colorplan.data.TempBg + '; border:3px solid ' + colorplan.data.TempBorder + '; border-radius:10px; margin-left:-10px; margin-top:-10px; z-index:5; position:absolute;"><font color="white">' + colorplan.data.TempChar + '</font></div><div id="temp' + item.Id + '" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:80px; margin-left:-80px; height:18px; position:absolute;"><div class="mark-container temperature-sensor" style="display:none; text-align:center; height:18px; width:80px; z-index:5; background-color:' + colorplan.data.TempNormal + '; margin-top:-18px; border:1px solid black; position:absolute;"><font color="black">270F</font></div><div class="mark-container temperature-sensor" style="display:none; text-align:center; height:18px; width:80px; z-index:5; background-color:' + colorplan.data.TempNormal + '; margin-top:-1px; border:1px solid black; position:absolute;"><font color="black">' + item.Name + '</font></div></div>')
                            }
                            alltempline = alltempline + item.Width + '_' + item.Height + '_' + item.TabWidth + '_' + item.TabHeight + "$";
                            //$("#mapcontainer").append('<div class="mark-container popover-xds temperature-sensor" id="ts-' + item.Id + '" data-toggle="popover" title=\'温度传感器\' data-html="true" data-content="' + item.VALUE + '" style="display:none;left:' + item.Width + ';top:' + item.Height + '"><div class="tem" id="ts-' + item.Id + '"><span class="num1">' + item.Id + '</span></div></div>')
                        });
                        $('#pipecontainerparent').append('<div class="pipecontainer" style="display:none" id="pipecontainer" ><svg id="svg" width="100%" height="100%"></svg></div>');
                        $.each(data.data2, function (i, item) {
                            svgpath = svgpath + item.VALUE + "$";
                        });
                        $.each(data.data3, function (i, item) {//油箱
                            if (item.TabWidth >= item.Width) {//判断框在左右位置
                                $("#mapcontainer").append('<div class="mark-container" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; text-align:center; height:30px; width:30px; margin-left:-15px; margin-top:-15px; z-index:5; position:absolute; background-image:url(/Images/tank.png); background-size:100% 100%; background-repeat:no-repeat;"></div><div class="mark-container" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; z-index:5; height:2px; width:2px; margin-left:-1px; margin-top:-1px; border:2px solid blue; border-radius:2px; position:absolute;"></div><div id="tank' + item.Id + '" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:80px; height:18px; position:absolute;"><div class="mark-container" style="text-align:center; height:20px; width:80px; z-index:5; background-color:black; margin-top:-20px; border:1px solid white; position:absolute;"><font color="white">' + item.VALUE + '</font></div><div class="mark-container" style="text-align:center; height:20px; width:80px; z-index:5; background-color:black; margin-top:-1px; border:1px solid white; position:absolute;"><font color="white">' + item.Name + '</font></div></div>')
                            } else {
                                $("#mapcontainer").append('<div class="mark-container" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; text-align:center; height:30px; width:30px; margin-left:-15px; margin-top:-15px; z-index:5; position:absolute; background-image:url(/Images/tank.png); background-size:100% 100%; background-repeat:no-repeat;"></div><div class="mark-container" style="left:' + item.Width * 100 + '%; top:' + item.Height * 100 + '%; z-index:5; height:2px; width:2px; margin-left:-1px; margin-top:-1px; border:2px solid blue; border-radius:2px; position:absolute;"></div><div id="tank' + item.Id + '" style="left:' + item.TabWidth * 100 + '%; top:' + item.TabHeight * 100 + '%; width:80px; margin-left:-80px; height:18px; position:absolute;"><div class="mark-container" style="text-align:center; height:20px; width:80px; z-index:5; background-color:black; margin-top:-20px; border:1px solid white; position:absolute;"><font color="white">' + item.VALUE + '</font></div><div class="mark-container" style="text-align:center; height:20px; width:80px; z-index:5; background-color:black; margin-top:-1px; border:1px solid white; position:absolute;"><font color="white">' + item.Name + '</font></div></div>')
                            }
                            DrawLine(item.Width, item.Height, item.TabWidth, item.TabHeight)
                            allwellline = allwellline + item.Width + '_' + item.Height + '_' + item.TabWidth + '_' + item.TabHeight + "$";
                        });
                    }
                },
                error: function () {
                    swal({
                        title: "Welcome in Alerts!",
                        text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                    });
            }
            });

            $('[data-toggle="popover"]').popover();
            $('.popover-show').click(function () {
                if (showpoverid != 0) {
                    var iid = this.getAttribute('id').split('-')[1];
                    if (showpoverid == iid) {
                        showpoverid = 0;
                    }
                    else {
                        $('#well-' + showpoverid).popover('toggle');
                        showpoverid = 0;
                        getOneIndicator(this.getAttribute('id').split('-')[1], this.getAttribute('id').split('-')[1] + '-img');
                        showpoverid = this.getAttribute('id').split('-')[1];
                    }
                }
                    //alert(showpoverid);
                else {
                    getOneIndicator(this.getAttribute('id').split('-')[1], this.getAttribute('id').split('-')[1] + '-img');
                    showpoverid = this.getAttribute('id').split('-')[1];
                }
                //alert(showpoverid);
                event.stopPropagation(); //阻止事件冒泡
            });
            $('.xdswell').click(function () {
                if (showpoverid != 0) {
                    var iid = this.getAttribute('id').split('_')[1];
                    if (showpoverid == iid) {
                        showpoverid = 0;
                    }
                    else {
                        $('#well-' + showpoverid).popover('toggle');
                        showpoverid = 0;
                        getOneIndicator(this.getAttribute('id').split('_')[1], this.getAttribute('id').split('_')[1] + '-img');
                        showpoverid = this.getAttribute('id').split('_')[1];
                    }
                }
                    //alert(showpoverid);
                else {
                    $('#well-' + this.getAttribute('id').split('_')[1]).popover('toggle');
                    getOneIndicator(this.getAttribute('id').split('_')[1], this.getAttribute('id').split('_')[1] + '-img');
                    showpoverid = this.getAttribute('id').split('_')[1];
                }
                //alert(showpoverid);
                event.stopPropagation(); //阻止事件冒泡
            });
            //$('.popover-xds').click(function () {
            //    if (xdspoverid != 0) {
            //        var iid = this.getAttribute('id');
            //        if (xdspoverid == iid) {
            //            xdspoverid = 0;
            //        }
            //        else {
            //            $('#' + xdspoverid).popover('toggle');
            //            xdspoverid = 0;
            //            xdspoverid = this.getAttribute('id');
            //        }
            //    }
            //    else {
            //        xdspoverid = this.getAttribute('id');
            //    }
            //    event.stopPropagation(); //阻止事件冒泡
            //});
            $("#myCanvas").click(function () {
                if (showpoverid != 0) {
                    $('#well-' + showpoverid).popover('toggle');
                    showpoverid = 0;
                }
                else if (xdspoverid != 0) {
                    $('#well-' + xdspoverid).popover('toggle');
                    xdspoverid = 0;
                }
            });

            $('#temperaturesensor').on('ifChecked', function (event) {
                temmptrueorfalse = 1;
                ReDrawLine(temmptrueorfalse);
                $('.temperature-sensor').show();
            });
            $('#temperaturesensor').on('ifUnchecked', function (event) {
                temmptrueorfalse = 0;
                ReDrawLine(temmptrueorfalse);
                $('.temperature-sensor').hide();
            });
            $('#oilpipe').on('ifChecked', function (event) {
                $('#svg').empty();
                var allpath = svgpath.split('$');
                for (var i = 0; i < allpath.length - 1; i++) {
                    var pathresult = modifyPath(allpath[i]);
                    var path = makeSVG('path', { 'class': 'pipe', 'stroke': colorplan.data.Pipe, 'stroke-width': '2px', 'fill': 'none', 'd': pathresult });
                    document.getElementById('svg').appendChild(path);
                }
                $('#pipecontainer').show();
            });
            $('#oilpipe').on('ifUnchecked', function (event) {
                $('#pipecontainer').hide();
            });
            $('.pipe').hover(function () {
                $('.pipe').css("stroke-width", "5px");
            },
            function () {
                $('.pipe').css("stroke-width", "2px");
            });

            $('.xds-minimalize').click(function () {
                setTimeout("ReDrawLine(temmptrueorfalse)", 400);
            });
        });
        function ReDrawLine(temp) {
            var width = $("#mapcontainer").width();
            var height = $("#mapcontainer").height();
            var canvas = document.getElementById("myCanvas");
            canvas.setAttribute("width", width)
            canvas.setAttribute("height", height)
            var everyline = allwellline.split('$');
            for (var i = 0; i < everyline.length - 1; i++) {
                var everylinedata = everyline[i].split('_');
                DrawLine(everylinedata[0], everylinedata[1], everylinedata[2], everylinedata[3])
            }
            if (temp == 1) {
                var everytempline = alltempline.split('$');
                for (var i = 0; i < everytempline.length - 1; i++) {
                    var everytemplinedata = everytempline[i].split('_');
                    DrawLine(everytemplinedata[0], everytemplinedata[1], everytemplinedata[2], everytemplinedata[3])
                }
            }
            $('#svg').empty();
            if ($("#pipecontainer").is(':visible')) {
                var allpath = svgpath.split('$');
                for (var i = 0; i < allpath.length - 1; i++) {
                    var pathresult = modifyPath(allpath[i]);
                    var path = makeSVG('path', { 'class': 'pipe', 'stroke': colorplan.data.Pipe, 'stroke-width': '2px', 'fill': 'none', 'd': pathresult });
                    document.getElementById('svg').appendChild(path);
                }
            }
        }
        function DrawLine(a, b, c, d) {//画线
            var width = $("#mapcontainer").width();
            var height = $("#mapcontainer").height();
            var canvas = document.getElementById("myCanvas");
            //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
            if (canvas.getContext) {
                //获取对应的CanvasRenderingContext2D对象(画笔)
                var ctx = canvas.getContext("2d");

                //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。

                //开始一个新的绘制路径
                ctx.beginPath();

                ctx.strokeStyle = colorplan.data.Line;
                //定义直线的起点坐标为(10,10)
                ctx.moveTo(a * width, b * height);
                //定义直线的终点坐标为(50,10)
                ctx.lineTo(c * width, d * height);
                //沿着坐标点顺序的路径绘制直线
                ctx.stroke();
                //关闭当前的绘制路径
                ctx.closePath();
            }
        }
        function modifyPath(svgpath) {//调整管道
            var patharr = svgpath.split(' ');
            var path = "M";
            var width = $("#mapcontainer").width();
            var height = $("#mapcontainer").height();
            path = path + patharr[0] * width + " ";
            path = path + patharr[1] * height + " ";
            for (var i = 1; i < patharr.length / 2; i++) {
                path = path + "L";
                path = path + patharr[2 * i] * width + " ";
                path = path + patharr[2 * i + 1] * height + " ";
            }
            return path;
        }
        function makeSVG(tag, attrs) {
            var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs)
                el.setAttribute(k, attrs[k]);
            return el;
        }

        function getOneIndicator(id, imgid) {
            $.ajax({
                url: '/Map/WellData',
                data: { wellid: id },
                type: 'post',
                async: false,
                dataType: 'json',
                success: function (data) {
                    if (data.status == 7) {
                        swal({
                            title: "Welcome in Alerts!",
                            text: "Authority error."
                        });
                    }
                    else if (data.status == 2) {
                        swal({
                            title: "Welcome in Alerts!",
                            text: "Permission denied."
                        });
                    }
                    else if (data.status == 3) {
                        swal({
                            title: "Welcome in Alerts!",
                            text: "No data."
                        });
                    }
                    else if (data.status == 0) {
                        showechart(imgid, data.data.Name1, data.data.Datetime, data.data.Data_Disp, data.data.Data_Load, data.data.Stroke, data.data.Jig, data.data.Up_Jig, data.data.Down_Jig);
                    }
                },
                error: function () {
                    swal({
                        title: "Welcome in Alerts!",
                        text: "The well does not exist."
                    });
                }
            });
        }
        function showechart(imgid, wellid, chartId, xdata, ydata, Stroke, Jig, Up_Jig, Down_Jig) {
            var myChart = echarts.init(document.getElementById(imgid));
            var data = [];
            for (var i = 0; i < xdata.length; i++) {
                var temp = [];
                temp.push(xdata[i]);
                temp.push(ydata[i]);
                data.push(temp);
            }
            var option = {
                title: {
                    left: 'center',
                    //text: '时间：' + chartId,
                    text: 'Time ' + chartId,
                    textStyle: {
                        fontSize: 13
                    }
                },
                tooltip: {
                    formatter: function (params) {
                        var data = params.data || [0, 0];
                        //return '位移：' + data[0].toFixed(2) + '（米）, 载荷：' + data[1].toFixed(2) + '（KN）';
                        return 'S:' + data[0].toFixed(2) + '(m), F:' + data[1].toFixed(2) + '(KN)';
                    }
                },
                grid: {
                    left: '5%',
                    right: '24%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    min: 0,
                    max: Math.floor(Math.max.apply(null, xdata)) + 1,
                    type: 'value',
                    //name: '位移(米)',
                    name: 'S/m',
                    axisLine: { onZero: false }
                },
                yAxis: {
                    min: Math.floor(Math.min.apply(null, ydata)) - 10,
                    max: Math.floor(Math.max.apply(null, ydata)) + 10,
                    type: 'value',
                    //name: '载荷(KN)',
                    name: 'F/KN',
                    axisLine: { onZero: false }
                },
                series: [
                  {
                      id: 'a',
                      type: 'line',
                      smooth: true,
                      symbolSize: 1,
                      data: data
                  }
                ]
            };
            myChart.setOption(option);
            //$("#" + imgid + "2").append('<table style="margin-left:25px; width:80%; text-align:center;"><tr><td><b>冲程:</b></td><td><b style="color:red;">' + Stroke + '</b><b>(米)</b></td><td><b>冲次:</b></td><td><b style="color:red;">' + Jig + '</b><b>(次/分)</b></td></tr><tr><td><b>上行冲次:</b></td><td><b style="color:red;">' + Up_Jig + '</b><b>(次/分)</b></td><td><b>下行冲次:</b></td><td><b style="color:red;">' + Down_Jig + '</b><b>(次/分)</b></td></tr></table>');
            $("#" + imgid + "2").append('<table style="margin-left:25px; width:80%; text-align:center;"><tr><td><b><abbr title="Stroke Length">SL</abbr></b></td><td><b style="color:red;">' + Stroke + '</b><b>(m)</b></td><td><b><abbr title="Stroke Times">ST</abbr>:</b></td><td><b style="color:red;">' + Jig + '</b><b>(time/min)</b></td></tr><tr><td><b><abbr title="UP Stroke Times">UST</abbr>:</b></td><td><b style="color:red;">' + Up_Jig + '</b><b>(time/min)</b></td><td><b><abbr title="DOWN Stroke Times">DST</abbr>:</b></td><td><b style="color:red;">' + Down_Jig + '</b><b>(time/min)</b></td></tr></table>');
        }
        function test(id) {//跳转单井页面
            sessionStorage.wellid = id;
            getWellName(id);
            window.open("/FirstPage/Index", "_self")
        }
        function getWellName(id) {
            $.ajax({
                url: '/WellList/OneWell',
                data: { wellid: id },
                type: 'post',
                async: false,
                dataType: 'json',
                success: function (data) {
                    sessionStorage.wellname = data.data.Name1;
                },
                error: function () {
                    swal({
                        title: "Welcome in Alerts!",
                        text: "Oil well name is not found."
                    });
                }
            });
        }
        $(window).resize(function () {//窗口重新变化
            ReDrawLine(temmptrueorfalse);
        });
        function popovertoggle(id) {
            $('#' + id).popover('toggle');
        }
        //function showxdspopocer() {
        //    var width = $("#mapcontainer").width()/2;
        //    var height = $("#mapcontainer").height();
        //    if (document.getElementById('xdspopover')) {
        //        $("#xdspopover").remove();
        //    } else {
        //        $('#mapcontainer').append('<div id="xdspopover" style="width:' + width + 'px;height:' + height + 'px;position:absolute;right:0px;top:0px;z-index:99;background-color:black"></div>')
        //    }
        //}
    </script>
}
